<template>
	<view class="container">
		<view class="userInfo">
			<!-- <cloud-image width="150rpx" height="150rpx" v-if="" src="/static/avatar.png"></cloud-image> -->
			<!-- <image class="logo-img" v-if="this.uid" src="/static/fire.png" v-on:click="setting()"></image>
			<image class="logo-img" src="/static/avatar.png" v-else  v-on:click="login()"></image>
			<view class="logo-title">
				<text class="uer-name" v-if="this.userName">{{this.userName}}</text>
				<text class="uer-name" v-else>点击登录</text>
			</view> -->
		</view>
		<view  style="border-radius: 40rpx;margin-top: -80rpx;background-color: #FFFFFF;">
			<view class="avatar">
				<image class="logo-img" :src="this.avatar"  v-on:click="isShow()"></image>
			</view>
			<view class="" style="margin: 0 100rpx;">
				<u--input
				  placeholder="昵称"
				  border="surround"
				  shape="circle"
				  v-model="userName"
				></u--input>
			</view>
			<view class="btn flex-i" style="margin-top: 200rpx;">
			    <u-button :disabled="false" :customStyle="{width: '490rpx'}" color="#13B9C7" type="primary" shape="circle" text="确认提交" @click="edit()"></u-button>
			</view>
		</view>
		<view class="">
			<u-popup :show="show" mode="bottom">
			        <view style="text-align: center;font-size: 40rpx;font-weight: 600;padding: 20rpx 0;">
			            <text>游戏头像</text>
			        </view>
					<view style="padding: 0 40rpx;">
						<u-grid :border="false" col="3">
							<u-grid-item v-for="(item,index) in list" :key="index" @click="changeAvatar(item.url)">
								<image :src="item.url" style="margin:20rpx;border-radius:20rpx;width: 180rpx;height: 180rpx;"></image>
							</u-grid-item>
						</u-grid>
					</view>
					<view class="btn flex-i" style="margin: 50rpx 0;">
					    <u-button :disabled="false" :customStyle="{width: '490rpx'}" color="#13B9C7" type="primary" shape="circle" text="确定" @click="sure()"></u-button>
					</view>
				</u-popup>
				
		</view>
	</view>
</template>

<script>
	import {editUser} from  "@/api/api.js"
	export default {
		data() {
			return {
				page:1,
				limit:4,
				list:[
					{url:'/static/avatar/1.jpg'},
					{url:'/static/avatar/2.jpg'},
					{url:'/static/avatar/3.jpg'},
					{url:'/static/avatar/4.jpg'},
					{url:'/static/avatar/5.jpg'},
					{url:'/static/avatar/6.jpg'},
					{url:'/static/avatar/7.jpg'},
					{url:'/static/avatar/8.jpg'},
					{url:'/static/avatar/9.jpg'},
				],
				uid:0,
				userName:null,
				avatar:null,
				show:false
			}
		},
		onLoad(){
			this.uid = uni.getStorageSync('uid')
			this.userName = uni.getStorageSync('user_name')
			this.avatar = uni.getStorageSync('avatar')
		},
		methods: {
			init(){
				this.uid = uni.getStorageSync('uid')
				this.avatar = uni.getStorageSync('avatar')
				this.userName = uni.getStorageSync('user_name')
			},
			getgame(){
				getRank(this.page,this.limit).then(res=>{
					this.categame = res.data
				});
			},
			isShow(){
				this.show=true;
			},
			changeAvatar(val){
				this.avatar=val;
			},
			sure(){
				this.show=false;
			},
			edit(){
				editUser(this.uid,this.avatar,this.userName).then(res=>{
					if(res.code==200){
						uni.removeStorageSync('avatar');
						uni.removeStorageSync('user_name');
						uni.setStorageSync('avatar', this.avatar);
						uni.setStorageSync('user_name', this.userName);
						uni.switchTab({
							url:'/pages/my/my',
							success(res) {
								var page = getCurrentPages()[0]
								console.log(page);
								if (page == undefined || page == null) return;
								page.init();
							}
						})
					}else{
						uni.showToast({
							title: '保存失败',
							icon: 'error'
						})
						return
					}
				});
			}
		}
	}
</script>

<style>
	.userInfo {
		text-align: center;
		padding: 20rpx;
		padding-top: 50rpx;
		padding-bottom: 160rpx;
		background-image: url(../../static/beiuj.png);
		background-size: 100% 100%;
		flex-direction: column;
		align-items: center;
	}
	.avatar {
		text-align: center;
		padding: 20rpx;
		padding-top: 70rpx;
		padding-bottom: 50rpx;
		flex-direction: column;
		align-items: center;
	}
	.logo-img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 200rpx;
	}
	.logo-title {
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
	}
	.uer-name {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 38rpx;
		color: #FFFFFF;
	}
	.grid-text {
		text-align: center;
		font-size: 26rpx;
		font-weight: 600;
		font-family: 'MicrosoftYaHei';
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width:140rpx;
	}
	.gametext{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width:240rpx;
	}
</style>
